﻿@{
    ViewBag.Title = "Home Page";
}
@section featured {
    <section>
        <h2></h2>
    </section>
}
@section scripts {
    <script type="text/javascript">
        $(function () {
            $('#tabs').tabs({ active: 0 });
            
            var listdemo = new _JsL.Employee.View({
                el: $('.emp2-container'),
                model: new _JsL.Pagination.Model({
                    config: { url: '/Home/GetEmps', method: 'GET' },
                    show_paging: false
                })
            });
            listdemo.bind('selectTitle', function (e) {
                console.log('a');
            });
            listdemo.render();

            var pagidemo = new _JsL.Employee.View({
                el: $('.emp-container'),
                model: new _JsL.Pagination.Model({
                    config: { url: '/Home/GetEmps', method: 'GET' },
                    show_paging: true,
                    page_container: $('.page-container')
                })
            });
            pagidemo.render();

            var treedemo = new _JsL.Tree.View({
                el: $('#treedemo'),
                model: new _JsL.Tree.Model({
                    config: { url: '/Home/GetTreeDemo', method: 'GET' },
                    tconfig: {
                        'themes': { 'theme': 'default', 'url': _JsL.rootPath + 'scripts/Plugin/jstree-default/style.css' },
                        'plugins': ['themes', 'html_data', 'ui', 'crrm'],
                        'core': { 'initially_open': ['1'] }
                    },
                    ids:'Id',
                    title: 'EName',
                    pid: 'PID',
                    deepest : 2
                })
            });
            treedemo.render();
        });
    </script>
}
<div id="tabs">
    <ul>
        <li><a href="#tab1">List</a></li>
        <li><a href="#tab2">Pagination</a></li>
        <li><a href="#tab3">Tree</a></li>

    </ul>
    <div id="tab1">
        <div class="emp2-container">
        </div>
    </div>

    <div id="tab2">
        <table style="width: 600px">
            <tr>
                <td style="width: 50%">
                    <div class="emp-container">
                    </div>
                    <br />
                    <div class="page-container">
                    </div>
                </td>
                <td style="width: 50%"></td>
            </tr>
        </table>
    </div>

    <div id="tab3">
        <div id="treedemo" style="min-height: 400px;">
        </div>
    </div>
</div>
<br />
